<!DOCTYPE html>
<html lang="en" class="deeppurple-theme">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover, user-scalable=no">
    <meta name="description" content="">
    <title>{$Think.lang.login_title}</title>
    <!-- Material design icons CSS -->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <!-- Roboto fonts CSS -->
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&amp;display=swap" rel="stylesheet">
    <!-- Bootstrap core CSS -->
    <link href="/red/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <!-- Swiper CSS -->
    <link href="/red/swiper/swiper-bundle.min.css" rel="stylesheet">
    <!-- Custom styles for this template -->
    <link href="/red/style.css?v=V1.24" rel="stylesheet">
    <link rel="stylesheet" href="/static_new/css/public.css?v=V1.24">
    <link href="/public/js/layer_mobile/need/layer.css?2.0" type="text/css" rel="styleSheet" id="layermcss">
    <script src="/red/jquery-3.3.1.min.js"></script>
    <script src="/statics/vender/intl-tel-input-master/js/intlTelInput.min.js"></script>
    <link rel="stylesheet" href="/statics/vender/intl-tel-input-master/css/intlTelInput.min.css">
    <style>
        .iti--allow-dropdown {
            width: 100%
        }

        .iti--separate-dial-code .iti__selected-flag {
            background: none
        }
    </style>
</head>
<body class="">

<div class="wrapper passport">
    <!-- header -->
    <div class="header">
        <div class="row no-gutters">
            <div class="col-2"></div>
            <div class="col-8 text-center">
                <span class="btn" style="width: 100%;display: none">{$Think.lang.login_title}</span></div>
            <div class="col-2 text-right">
                <a href="/index/user/lang" class="btn btn-link text-dark">
                    <i class="material-icons" style="display: inline-block">language</i></a>
            </div>
        </div>
    </div>
    <!-- header ends -->
    <div class="container title">
        <div class="row" style="display: none">
            <div class="col mt-4 mb-2">
                <h4>{$Think.lang.login_title}</h4></div>
        </div>
    </div>
    <div class="container">
        <div class="bg-default">
            <div class="row no-gutters login-row">
                <div class="col align-self-center px-3 text-center mt-4">
                    <img src="{:sysconf('site_icon')}" style="width:100px;height:100px;border-radius: 10px">
                    <p style="margin-top: 10px; font-size: 14px">
                        <b>{:sysconf('site_name')}</b>
                    </p>
                    <p style="margin-top: 5px; font-style: italic">{$Think.lang.login_comment}</p>
                    <form class="form-signin mt-3 ">
                        <!--<div class="form-group input-group">
                            <div class="input-group-prepend">
                                <button class="btn dropdown-toggle address" type="button" data-toggle="dropdown"
                                        aria-haspopup="true" aria-expanded="false">{:config('lang_tel_pix')}
                                </button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#">{:config('lang_tel_pix')}</a>
                                </div>
                            </div>
                            <input type="text" name="tel" class="form-control form-control-lg text-center"
                                   placeholder="{$Think.lang.login_phone}" value="" required="" autofocus="">
                        </div>-->
                        <div class="form-group">
                            <input type="text" name="tel" id="phone" class="form-control form-control-lg"
                                   placeholder="{$Think.lang.login_phone}" value="" required="" autofocus="">
                        </div>
                        <div class="form-group">
                            <input type="password" id="inputPassword" name="pwd"
                                   class="form-control form-control-lg text-center"
                                   placeholder="{$Think.lang.login_pass}" value="" required=""></div>
                        <!--<div class="form-group my-4 text-left"><div class="custom-control custom-checkbox"><input type="checkbox" class="custom-control-input" id="rememberme"><label class="custom-control-label" for="rememberme">Remember Me</label></div></div>-->
                    </form>
                </div>
            </div>
            <div class="row mx-0 mt-4">
                <div class="col">
                    <button class="btn btn-default btn-lg btn-rounded shadow btn-block login">
                        {$Think.lang.login_title}
                    </button>
                    <div class="mt-4 row justify-content-center">
                        <a href="/index/user/register" class="col-6 d-block text-center">{$Think.lang.reg}</a>
                        <!--<a href="/index/user/forget" class="col-6 d-block text-right">{$Think.lang.reset_password}</a>-->
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="notification shadow pt-0 pl-0 pr-0 border-0 bg-template-light">
    <div id="notification_countdown"></div>
    <div class="row pt-2 pl-3 pr-3">
        <div class="col-auto align-self-center pr-0">
            <i class="material-icons text-template md-36">redeem</i></div>
        <div class="col small notification-content">loading...</div>
        <div class="col-auto align-self-center pl-0">
            <button class="btn btn-link closenotification">
                <i class="material-icons text-template md-18 ">close</i></button>
        </div>
    </div>
</div>
<script type="text/javascript">var app = {
    'online_popup': "",
}</script>
<!-- jquery, popper and bootstrap js -->
<script src="/red/popper.min.js"></script>
<script src="/red/bootstrap/js/bootstrap.min.js"></script>
<!-- swiper js -->
<script src="/red/swiper/swiper-bundle.min.js"></script>
<!-- cookie js -->
<script src="/red/jquery.cookie.js"></script>
<script charset="utf-8" src="/static_new/js/dialog.min.js"></script>
<link rel="stylesheet" href="/public/js/layer_mobile/need/layer.css">
<script src="/public/js/layer_mobile/layer.js"></script>
<script charset="utf-8" src="/static_new/js/jquery.progressBarTimer.js"></script>
<script charset="utf-8" src="/static_new/js/common.js"></script>
<!-- template custom js -->
<script src="/red/main.js?v=V1.24"></script>
<script type="application/javascript">sessionStorage.setItem('login_flag', '1');
$(function () {
    /*检查表单*/
    function check() {
        if ($("input[name=tel]").val() == '' || $("input[name=pwd]").val() == '') {
            $(document).dialog({
                infoText: 'Please enter account / password'
            });
            return false;
        }
        return true;
    }

    /*监听账号input*/
    $("input[name=tel]").bind("input propertychange", function () {
        if ($(this).val() !== '') {
            $('.icon-delete').show();
        } else {
            $('.icon-delete').hide();
        }
    });

    /*点击删除icon*/
    $(".icon-delete").on('click', function () {
        $("input[name=tel]").val('');
        $('.icon-delete').hide();
    })

    /*显示or隐藏密码*/
    $(".icon-eye").on('click', function () {
        var type = $("input[name=pwd]").attr("type");
        if (type == 'pwd') {
            $("input[name=pwd]").attr('type', 'text');
            return;
        }
        $("input[name=pwd]").attr('type', 'pwd');
    });

    /*点击登录*/
    $(".login").on('click', function () {
        if (check()) {
            var host = window.location.host;
            if (host.startsWith('localhost')) {
                form_submit('');
            } else {
                /*grecaptcha.ready(function() {
                grecaptcha.execute('6LdC99EZAAAAABfzI41Q48ZSd2Pe2aHA_vJ61go4', {action: 'submit'}).then(function(token) {
                // Add your logic to submit to your backend server here.
                form_submit(token);
                });
                });*/
                form_submit('');
            }
        }
    });

    function form_submit(reCAPTCHA) {
        var pix = iit.getSelectedCountryData();
        $.cookie('use_country', pix.iso2);
        var loading = null;
        var tel = pix.dialCode + "" + $("input[name=tel]").val();
        var pwd = $("input[name=pwd]").val();
        var jizhu = $("input[name=jizhu]").val();
        var _csrf_ = "{:systoken('do_login')}";
        $.ajax({
            url: "/index/user/do_login.html",
            data: {
                tel: tel,
                pwd: pwd,
                jizhu: jizhu,
                '_csrf_': _csrf_,
                'reCAPTCHA': reCAPTCHA
            },
            type: 'POST',
            beforeSend: function (request) {
                request.setRequestHeader('User-Token-Csrf', _csrf_);
                loading = $(document).dialog({
                    type: 'notice',
                    infoIcon: '/static_new/img/loading.gif',
                    infoText: 'loading...',
                    autoClose: 0
                });
            },
            success: function (data) {
                loading.close();
                if (data.code == 0) {
                    $(document).dialog({
                        infoText: data.info
                    });
                    setTimeout(function () {
                            location.href = "/index/index/home.html"
                        },
                        2000);
                } else {
                    loading.close();
                    if (data.info) {
                        $(document).dialog({
                            infoText: data.info
                        });
                    } else {
                        $(document).dialog({
                            infoText: "Network unstable, please try again at a place with better signal!",
                            autoClose: 2000
                        });
                    }
                }
            },
            error: function (data) {
                loading.close();
            }
        });
    }

    var iit = intlTelInput(document.querySelector("#phone"), {
        excludeCountries: ["cn", "hk", "tw", "mo"],
        separateDialCode: true,
        utilsScript: "/statics/vender/intl-tel-input-master/js/utils.js",
        initialCountry: "auto",
        geoIpLookup: function (success, failure) {
            var c = $.cookie('use_country');
            success(c ? c : 'us');
        },
    });
});

</script>
</body>

</html>